<template>
  <view class="skin-container setting-popup">
    <button @click="emitClose" style="position:absolute;right:20rpx;top:20rpx;z-index:10;">关闭</button>
    <view class="skin-list">
      <view v-for="(item, idx) in skins" :key="idx" class="skin-item" :class="{selected: selectedSkin === idx}">
        <image :src="item.img" class="skin-icon" />
        <view>{{ item.name }}</view>
        <button v-if="selectedSkin !== idx" @click="selectSkin(idx)">选择</button>
        <view v-else>已选择</view>
      </view>
    </view>
    <view class="skin-actions">
      <button @click="randomUnlock">随机解锁</button>
      <button @click="watchAd">看广告得100积分</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['close'])
const emitClose = () => emit('close')

const skins = ref([
  { name: '默认皮肤', img: '/static/skin.png' },
  { name: '红色锤子', img: '/static/skin.png' },
  { name: '蓝色锤子', img: '/static/skin.png' },
  { name: '金色锤子', img: '/static/skin.png' }
])

const selectedSkin = ref(0)

const selectSkin = (idx) => {
  selectedSkin.value = idx
  uni.showToast({ title: '皮肤切换成功', icon: 'none' })
}

const randomUnlock = () => {
  uni.showToast({ title: '随机解锁开发中', icon: 'none' })
}

const showDefaultSkin = () =>  {
    // 1. 切换皮肤状态为默认
    // this.currentSkin = 'default'; // 假设 currentSkin 控制当前显示的皮肤
    
    // 2. 可选：提示用户
    uni.showToast({
      title: '使用默认皮肤',
      icon: 'none',
      duration: 1500
    });
    
    // 3. 其他逻辑：比如隐藏加载中状态、恢复界面交互等
    // this.isLoading = false;
}
  
const watchAd = () => {
  // uni.showToast({ title: '广告功能开发中', icon: 'none' })

  // 检查是否支持全屏视频广告
    if (uni.createFullScreenVideoAd) {
      try {
        // 创建广告实例
        const ad = uni.createFullScreenVideoAd({
          adUnitId: '1111111113' // 替换为你的广告单元ID
        });
        
        // 监听广告加载成功事件
        ad.onLoad(() => {
          console.log('广告加载成功');
          // 显示广告
          ad.show().catch(err => {
            console.error('广告显示失败:', err);
            // 广告显示失败的处理逻辑
            showDefaultSkin();
          });
        });
        
        // 监听广告加载失败事件
        ad.onError(err => {
          console.error('广告加载失败:', err);
          // 广告加载失败的处理逻辑
          showDefaultSkin();
        });
        
        // 监听广告关闭事件
        ad.onClose(res => {
          console.log('广告关闭:', res);
          // 用户点击了广告或关闭了广告
          if (res && res.isEnded || res === undefined) {
            // 正常播放结束，可以发放奖励
            this.unlockPremiumSkin();
          } else {
            // 播放中途退出，不发放奖励
            uni.showToast({
              title: '观看完整广告才能解锁皮肤',
              icon: 'none'
            });
          }
        });
        
        // 加载广告
        ad.load();
      } catch (error) {
        console.error('广告处理出错:', error);
        showDefaultSkin();
      }
    } else {
      // 当前平台不支持全屏视频广告
      uni.showToast({
        title: '当前平台不支持广告功能',
        icon: 'none'
      });
      showDefaultSkin();
    }
}
</script>

<style scoped>
.skin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}
.setting-popup {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
  padding: 40rpx 0;
  min-width: 600rpx;
  min-height: 400rpx;
  position: relative;
  z-index: 1002;
  opacity: 1;
}
.skin-img {
  width: 80vw;
  margin-bottom: 40rpx;
}
.skin-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 90vw;
}
.skin-item {
  width: 30vw;
  margin: 10rpx;
  padding: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.skin-item.selected {
  border-color: #f90;
}
.skin-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.skin-actions {
  margin-top: 40rpx;
  width: 80vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.skin-actions button {
  width: 36vw;
}
</style> 